<template>
	<view>
		<u-sticky :h5-nav-height="0" bg-color="#FFFFFF">
			<view class="u-flex header">
				<u-search placeholder="请输入要查询对内容" v-model="keyword" wrapBgColor="transparent" bg-color="#eee"></u-search>
				<view class="u-text-center u-padding-right-20">
					<view class="u-font-30 bold u-color-FF6F00">{{sumNumberForwarding||0}}</view>
					<view class="u-font-22 u-color-222222">今日累计转发获客</view>
				</view>
			</view>
			<commonTab class="u-padding-bottom-10" :nowCurrent="0" style="box-shadow: 0 20rpx 20rpx #eee;"></commonTab>
		</u-sticky>
		<view class="main-content u-padding-top-25 bg-white u-margin-top-25">
			<!-- 轮播图 -->
			<swipers :pid="13" height="224rpx" padding="0 30rpx"></swipers>
			<scroll-view class="classify-area u-padding-top-25 u-padding-bottom-25" scroll-x>
				<view class="u-flex">
					<view class="classify-item u-color-666666" @click="selectClassify(-1)"
						:class="{'classify-select':nowSelectClassifyKey == -1}">
						全部
					</view>
					<view v-for="(v,k) in classifyDatas" :key="k" @click="selectClassify(k)"
						:class="{'classify-select':nowSelectClassifyKey == k}" class="classify-item u-color-666666">
						{{v.name||''}}
					</view>
				</view>
			</scroll-view>
			
			<scroll-view class="bg-white article-area u-padding-top-15">
				<view v-for="(v,k) in articleData" :key="k" @click="goPage(`/yixu/pages/article_acquisition/info?id=${v.id}`)" class="article-item article-item-one u-padding-top-20 u-margin-left-30 u-margin-right-30 u-padding-bottom-20 u-flex u-col-top">
					<view class="article-content-area u-padding-right-25 u-flex-col u-flex-1">
						<view class="md u-font-weight-500 u-color-333333 u-flex-1">
							{{v.title||''}}
						</view>
						<view class="u-color-666666 u-flex u-flex-1 xs">
							<view class="u-padding-right-35">分享 {{v.share_count||0}}</view>
							<view class="u-padding-right-35">获客 {{v.customers_count||0}}</view>
							<view>{{v.create_time||''}}</view>
						</view>
					</view>
					<u-lazy-load class="cover" img-mode="widthFix" :border-radius="10" :image="v.image"></u-lazy-load>
				</view>
			</scroll-view>
		</view>
		<view v-if="articleData.length <= 0" class="u-padding-45">
			<u-empty text="暂无数据" mode="news" color="#909399" icon-color="#909399"></u-empty>
		</view>
		<pop-advertising pid="14"></pop-advertising>
		<common-tabbar></common-tabbar>
	</view>
</template>

<script>
	import commonTab from '@/yixu/pages/article_acquisition/components/common_tab.vue'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getArticleList,
		getCategoryList,
		numberForwarding,
		updateArticleDatas
	} from '@/api/publicArticle'
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	import Cache from "@/utils/cache";
	import wechath5 from '@/utils/wechath5'
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				page: 1,
				keyword: '',
				articleData: [],
				classifyDatas: [],
				sumNumberForwarding:0,
				nowSelectClassifyKey: -1,
				status: loadingType.LOADING,
			};
		},
		async onLoad() {
			let {
				code,
				data
			} = await getCategoryList({
				type: 2
			})
			this.classifyDatas = data;
			this.queryArticleListFun()
			this.getUser();
			let d = await numberForwarding();
			
			this.sumNumberForwarding = d.data
			uni.$on('h5shareSetSuccess', function() {
				const shareInfo = Cache.get("shareInfo");
				wechath5.share({
					shareTitle: '文章获客',
					shareImage: shareInfo.mnp_share_image,
					shareLink: `https://dtm.lanbaozixun.com/mobile/yixu/pages/article_acquisition/index?invite_code=${this.inviteCode}`,
					shareDesc: '文章获客'
				})
			})
		},
		onReachBottom() {
			this.queryArticleListFun()
		},
		methods: {
			...mapActions(['getUser']),
			selectClassify(k) {
				this.nowSelectClassifyKey = k
				this.clearDatas()
			},
			clearDatas(){
				this.page = 1;
				this.articleData = [];
				this.status = loadingType.LOADING
				this.queryArticleListFun()
			},
			queryArticleListFun() {
				let requestParams = {
					type: 2,
					keyword: this.keyword,
					cid: this.$u.test.isEmpty(this.classifyDatas[this.nowSelectClassifyKey]) ? 0 : this.classifyDatas[
						this.nowSelectClassifyKey].id
				}
		
				loadingFun(getArticleList, this.page, this.articleData, this.status, requestParams).then(res => {
					if (res) {
						this.page = res.page;
						this.status = res.status
						this.articleData = res.dataList
					}
				})
			},
			async transpond(k) {
				let copyContent = this.articleData[k];
				uni.setClipboardData({
					data: copyContent.synopsis
				});
				await updateArticleDatas({
					id:copyContent.id,
					field:'transpond_count'
				})
				this.articleData[k].transpond_count = parseInt(this.articleData[k].transpond_count) + 1;
			},
			goPage(url){
				uni.navigateTo({
					url:`${url}&user_id=${this.userInfo.id}`
				})
			}
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '文章获客',
				path: "yixu/pages/article_acquisition/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '文章获客',
				path: "yixu/pages/article_acquisition/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		computed: {
			...mapGetters(["userInfo","inviteCode"]),
		}
	}
</script>

<style lang="scss">
	page{
		min-height: 100vh;
		background: #F2F2F2;
		// background: linear-gradient(to bottom , rgba(120, 201, 255, 1), rgba(156, 215, 255, 1) 13.69%, rgba(224, 242, 255, 1) 22.53%, rgba(255, 255, 255, 0));
		
		.header{
			background: #FFFFFF;
		}
		
		
		.function-area{
			
			.function-item{
				
				
				.function-icon{
					width: 90rpx;
					height: 110rpx;
					box-shadow: 0px 24rpx 24rpx -24rpx rgba(0, 0, 0, 0.2);
				}
			}
		}
		
		
		.main-content{
			border-radius: 30rpx 30rpx 0 0;
			// background: linear-gradient(176.92deg, rgba(214, 238, 255, 1) 0%, rgba(255, 255, 255, 1) 54.75%, rgba(242, 242, 242, 1) 100%);
			
			// border: 2rpx solid rgba(255, 255, 255, 1);
			
			
			.classify-area{
				margin: 0 35rpx;
				width: calc(100vw - 70rpx);
				
				
				.classify-item{
					flex-shrink: 0;
					color: #666666;
					padding: 8rpx 24rpx;
					display: inline-block;
					border-radius: 10rpx;
					margin-right: 16rpx;
					background: rgba(26, 26, 26, 0.06);
				}
				
				.classify-select{
					color: white;
					background: #2DAAFF;
				}
			}
			
			
			.article-area{
				
				.article-item{
					border-bottom: 2rpx solid #F5F5F5;
					
					&:last-child{
						border-color: transparent;
					}
				}
				
				.article-item-one{
					align-items: stretch !important;
					
					.article-content-area{
						width: calc(100% - 200rpx);
					}
					
					.cover{
						width: 200rpx;
						max-height: 170rpx;
					}
				}
				
				.article-item-tow{
					.cover{
						width: 210rpx;
						max-height: 170rpx;
					}
				}
			}
		}
	}
</style>
